<template>
	<view>
		<scroll-view class="scroll-y" scroll-y="true" style="height: 100%;">
		<view class="jiacu-left">
			<view class="fbox">
				泉州风光
			</view>
		</view>
		
		<view class="fbox">
			<swiper circular:indicator-dots="indicatorDots" :autoplay="true"
			 :interval="interval" :duration="duration">	
			<swiper-item><image  class="" src="/static/city1.png"></image></swiper-item>
				<swiper-item><image class="" src="/static/city2.png"></image></swiper-item>
				<swiper-item><image class="" src="/static/city3.png"></image></swiper-item>
				<swiper-item><image class="" src="/static/city4.png"></image></swiper-item>
                  <swiper-item><image class="" src="/static/city5.png"></image></swiper-item>				
				</swiper>
		</view>
		
		
		<view class="fbox">
			<view class="jiacu-left">
			城市介绍
			</view>
			<view class="">
				<rich-text :nodes="nodes"></rich-text>
			</view>
			<view class="">
				<rich-text :nodes="node"></rich-text>
			</view>
			<view class="">
<rich-text :nodes="scenic"></rich-text>				
			</view>
			<view class="">
				<rich-text :nodes="clture"></rich-text>
			</view>
		</view>
		
		<view class="">
		<view class="jiacu-left">
		探索进度
		</view>
		<view>
			当前进度：70%
		</view>
		<view class="">
			<progress :percent="pglist[0]" active="true" activeColor="#55ffff" stroke-width="20" show-info="true"></progress>
		</view>
		</view>
		<!--picker-->
		<view class="content">
			<view class="jiacu-left fbox">
				选择城市
			</view>
			<picker
			  mode="multiSelector" 
			  :value="multiIndex"
			  :range="multiArray"
			  @change="bindMultiPickerChange"
			  @columnchange="bindMultiPickerColumnChange"
			> <view class="uni-input">
          {{ multiArray[0][multiIndex[0]] }}，{{ multiArray[1][multiIndex[1]] }}，
		  {{ multiArray[2][multiIndex[2]] }}
        </view>
      </picker>	
		</view>
		
		<!--voide-->
		<view class="container">
		  <view class="uni-padding-wrap uni-common-mt">
		    
		    <video
		      id="myVideo"
		      class="video-player"
		      src="/static/city-video.mp4"
		      @error="videoErrorCallback"
		      controls
		      poster="/static/city1.png"
		      @play="onPlay"
		      @pause="onPause"
		      @ended="onEnded"
		    ></video>
		    
		    <!-- 视频控制按钮 -->
		    <view class="video-controls">
		      <button @click="playVideo">播放</button>
		      <button @click="pauseVideo">暂停</button>
		      <button @click="fullScreen">全屏</button>
		    </view>
		  </view>
		</view>
		
		
		<!-- slide-->
		<view class="fbox">
			<view class="jiacu-left">
				偏好设置
			</view>
			
			
		<view class="" style="height: 50px;">
			出行方式
		<label class="" style="margin-right: 30rpx;">
		  <radio value="r1" checked="true" color="#FFCC33" style="transform: scale(0.7)" />公交
		</label>
			<label class="" style="margin-right: 30rpx;">
			  <radio value="r1" checked="" color="#FFCC33" style="transform: scale(0.7)" />自驾
			</label>
			<label class="" style="margin-right: 30rpx;">
			  <radio value="r1" checked="" color="#FFCC33" style="transform: scale(0.7)" />步行
			</label>
			
		</view>	
		
			
		
		<view>
			<text style="padding-right: 50%; ">
				显示推荐景点
			</text>  <switch checked />
		</view>
		
		
		<view class="">
			<text>探索半径(km)</text>
			<slider   value="15" 
        show-value @change="sliderChange"/>
			
		</view>
		
		
		</view>
</scroll-view>
	</view>
</template>

<script>
	export default {
		 data() {
		    return {
		      nodes: [{
		        name: 'div',
		        attrs: {
		          class: 'div-class',
		          style: 'line-height: 10px; color: ; text-align:left;'
		        },
		        children: [{
		          type: 'text',
		          text: '海上丝绸之路起点——泉州'
		        }]
		      }],
		    node: [{
		      name: 'p',
		      attrs: {
		        class: 'p-class',
		        style: 'line-height: 20px; text-align:;'
		      },
		       children: [
		         {
		           name: 'span',
		           attrs: { 
		             style: 'color: #000000; font-weight: bold'
		           },
		           children: [{
		             type: 'text',
		             text: '历史文化:&nbsp;'
		           }]
		         },
			  {
				  type:'text',
				  text:'泉州是古代“海上丝绸之路”的重要节点，宋元时期更是成为了世界著名的海外交通重要港口城市，被誉为“东方第一大港”。'
			  }
			  ]
		    }],
			
			scenic:[{
				 name: 'p',
						      attrs: {
						        class: 'p-class',
						        style: 'line-height: 20px; text-align:;'
						      },
						       children: [
						         {
						           name: 'span',
						           attrs: { 
						             style: 'color: #000000; font-weight: bold'
						           },
								   //！！！
						           children: [{
						             type: 'text',
						             text: '著名景点:&nbsp;'
						           }]
						         },
							  {
								  type:'text',
								  text:'清源山、洛伽寺、泉州开元寺、南少林寺‌、‌西街‌等'
							  }
							  ]
				
			}],
			
			clture:[{
				name:'p',
				 attrs:{
					 class:'p-class',
					 style:'lin-height:20px;text-align:;'
				 },
				 children:[
					 {name:'span',
					 attrs:{
						 style:'color:#000;font-weight:bold'
					 },
					 children:[{
						 type:'text',
						 text:'特色文化:&nbsp;'
					 }]
					 },
					{type:'text',
					 text:'拥有'} ,
				 {
				      name: 'span', 
				      attrs: {
				        style: 'color:#ff0000;font-weight:bold'
				      },
					 children: [{
					        type: 'text',
					        text: '南音、木偶戏'
					      }]
					    },
					 {type:'text',
					  text:'和'} ,
					 {
					      name: 'span', 
					      attrs: {
					        style: 'color:#ff0000;font-weight:bold'
					      },
					 					 children: [{
					 					        type: 'text',
					 					        text: '闽南建筑'
					 					      }]
					 					    },
											{type:'text',
											 text:'等丰富的非物质文化遗产'} ,
				 ]
				
			}],
			
			
				//progress
			 pglist: [70],
			//picker
			multiArray: [
			  ['福建省', '江西省'],  
			  ['泉州市', '石狮市','漳平市'],   
			  ['南安区', '惠安区', '晋江区']  
			],
			
			multiIndex: [0, 0, 0],
			
			videoContext: null,
			videoStatus: '未播放'
			}
		  },
		  onReady() {
		    // 获取视频上下文
		    this.videoContext = uni.createVideoContext('myVideo', this);
		  },
		  
		methods: {
			setProgress() {
			  this.pglist = [60];
			},
		bindMultiPickerChange(e) {
		  console.log('选择结果：', e.detail.value);
		  this.multiIndex = e.detail.value;
		},
		
		bindMultiPickerColumnChange(e) {
		  console.log('列变化：', e.detail.column, e.detail.value);
		  const { column, value } = e.detail;
		
		  this.multiIndex[column] = value;
		  
		
		  switch (column) {
		    case 0:  
		      
		      this.multiIndex[1] = 0;
		      this.multiIndex[2] = 0;
		      
		    
		      if (value === 0) {  
		        this.multiArray[1] = ['泉州市', '石狮市','漳平市'];
		        
		        this.multiArray[2] = ['南安区', '晋江区', '惠安区'];
		      } else { 
		        this.multiArray[1] = ['江', '西', '省'];
		       
		        this.multiArray[2] = ['江', '西'];
		      }
		      break;
		      
		    case 1:  
		     
		      this.multiIndex[2] = 0;
		      
		     
		      if (this.multiIndex[0] === 0) {  
		        if (value === 0) {  
		          this.multiArray[1] = ['石', '狮', '市'];
		        } else if (value === 1) {  
		          this.multiArray[2] = ['石', '狮', '市'];
		        } else {  
		          this.multiArray[2] = ['漳', '平', '市'];
		        }
		      } else {  
		        if (value === 0) {
		          this.multiArray[2] = ['江西', '特', '色'];
		        } else if (value === 1) {  
		          this.multiArray[2] = ['番茄', '地瓜', '白菜'];
		        } else {  
		          this.multiArray[2] = ['无无', '伍伍', '无物'];
		        }
		      }
		      break;
		  }
		  
		  this.$forceUpdate();
		}
		
		
		
		},
		videoErrorCallback(e) {
		  uni.showToast({
		    title: '视频播放错误: ' + e.detail.errMsg,
		    icon: 'none'
		  });
		},
		
		playVideo() {
		  this.videoContext.play();
		},
		
		pauseVideo() {
		  this.videoContext.pause();
		},
		
		fullScreen() {
		  this.videoContext.requestFullScreen({
		    direction: 90 // 横屏全屏
		  });
		},
		
		onPlay() {
		  this.videoStatus = '播放中';
		  console.log('视频开始播放');
		},
		
		onPause() {
		  this.videoStatus = '已暂停';
		  console.log('视频已暂停');
		},
		
		onEnded() {
		  this.videoStatus = '播放结束';
		  console.log('视频播放结束');
		},
		//slide
		sliderChange(e) {
		      console.log('滑块值变化:', e.detail.value);
		      // 这里可以添加处理滑块值变化的逻辑
		    }
			
	}
</script>

<style>

</style>

